<template>
  <a-tree-select
    :disabled="disabled"
    v-model="initValue"
    style="width: 100%"
    :tree-data="dataList"
    tree-checkable
    placeholder="请选择家庭所属村"
    :replaceFields="{
      value: 'village_id',
      title: 'village_name'
    }"/>
</template>

<script>
  import {
    TreeSelect
  } from 'ant-design-vue'
  import {
    villageList
  } from '@/api'

  const dataList = [{
    village_name: '全部',
    village_id: '000',
    children: []
  }]

  export default {
    props: {
      ...TreeSelect.props,
      value: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        initValue: [],
        dataList
      }
    },
    watch: {
      value (n) {
        this.initValue = n
      },
      initValue (value) {
        this.$emit('change', value)
      }
    },
    created () {
      villageList().then(res => {
        this.dataList[0].children = res.list
      })
    },
    methods: {}
  }
</script>
